<template>
  <!-- 签到页 -->
  <div class="box">
    <!-- 头部 -->
    <div class="top">
      <img src="../../../img/102.png" alt="" />
      <div class="names">
        <div class="tops">
          <span
            class="iconfont icon-chevron-thin-left"
            style="margin-left: 0.8rem; float: left"
            @click="back()"
          ></span>
          <span
            class="iconfont icon-7tian"
            style="float: right; margin-right: 1.5rem; font-size: 1.3rem"
          ></span>
        </div>
        <div class="btn">
          <img :src="data.img" alt="" />
          <span>{{ data.name }}</span>
          <p class="iconfont icon-gengduo-2">
            <!-- + Number(prcnu) -->
            <!-- {{ shopdata.num + Number(prcnu)}} -->
            {{ inten + Number(numli) }}
          </p>
        </div>
      </div>
    </div>
    <!-- 签到 -->
    <div class="sign">
      <span>你已签到{{ prcnu }}天</span>
      <ul class="listtime">
        <li v-for="(item, index) in list" :key="index">
          <p
            @click="acvt(item, index)"
            :class="item.flag == 'true' ? 'active' : ''"
          >
            +{{ item.num }}
          </p>
          <div class="aaa">{{ item.timer === 0 ? "7" : item.timer }}</div>
        </li>
      </ul>
      <div class="nbh">
        <div class="sihh" v-if="start">已签到</div>
        <div class="sihh" v-if="!start" style="background: red" @click="jash()">
          未签到
        </div>
      </div>
    </div>
    <!-- 积分兑换 -->
    <div class="integral">
      <b>积分兑换专区</b>
      <p class="iconfont icon-chevron-thin-right" @click="prefects()"></p>
    </div>
    <!-- 数据列表 -->
    <ul class="foot">
      <li v-for="(item, index) in listdata" :key="index">
        <img :src="item.url" alt="" />
        <span class="bbb">{{ item.title }}</span>
        <p>
          <span class="iconfont icon-gengduo-2" style="color: #ff3f3f"></span>
          <span>{{ item.price }}积分</span>
        </p>
      </li>
    </ul>
    <!-- 弹窗 -->
    <div class="Dialog" v-if="flag">
      <div class="logs">
        <div class="hjk">
          <b>{{ flags ? "签到成功" : "今日已签到" }}</b>
          <p>{{ flags ? `恭喜您获得${numli}积分` : "" }}</p>
          <img src="@/img/101.png" alt="" />
        </div>
        <span class="iconfont icon-guanbi-01" @click="shut()"></span>
      </div>
    </div>
  </div>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
export default {
  name: "",
  data() {
    return {
      data: {
        img: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).img
            ? JSON.parse(localStorage.getItem("token")).img
            : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png"
          : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portrait.png",
        name: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).name
          : "未登录",
      },

      listdata: [],
      linum: 0,
      flag: false,
      start: false,
      numli: 0,
      prcnu: 0,
      flags: false || localStorage.getItem("aaa"),
      list: [],
      inten: "",
    };
  },

  async created() {
    // 签到数据
    let date = await API.sign();
    this.list = date.data;
    // 积分商城列表
    let date1 = await API.hsignlist();
    this.listdata = date1.data;

    let nowDate = new Date().getDay();
    this.list.forEach((val) => {
      if (val.timer === nowDate && val.flag == "true") {
        this.flag = true;
        this.start = true;
      }
    });
    if (this.flags) {
      this.flags = false;
      localStorage.setItem("aaa", this.flags);
    }
    // 获取积分的接口
    let res = await API.getToken({
      uid: JSON.parse(localStorage.getItem("token")).uid,
    });
    this.inten = res.data.integral;
    //积分存数据库
    let res2 = await API.integer({
      uid: JSON.parse(localStorage.getItem("token")).uid,
      num: this.inten + this.numli,
    });

    this.prcnu = res2.listChecked;
    // localStorage.setItem('token',JSON.stringify(res2.data))
  },

  methods: {
    //  判断连续7天签到
    phsr() {
      let a = this.list.every((item) => {
        return item.flag === "true";
      });
      console.log(a);
      if (a === true) {
        this.numli = 30;
      } else {
        this.numli = 5;
      }
    },
    //点击返回
    back() {
      this.$router.go(-1);
    },
    //点击签到高亮
    async acvt(item, index) {
      console.log(item);
      if (item.flag === "true") {
        this.flag = true;
      } else {
        let nowDate = new Date().getDay();
        if (item.timer === nowDate) {
          let res = await API.signss({ id: item.id });
          this.list = res.data;
          this.flag = true;
          this.start = true;
          this.flags = true;
          localStorage.setItem("aaa", this.flags);
        }
        this.phsr();
      }
    },
    //点击未签到
    jash() {
      let nowDate = new Date().getDay();
      this.list.forEach(async (item, index) => {
        if (item.timer === nowDate) {
          let res = await API.signss({ id: item.id });
          this.list = res.data;
          this.flag = true;
          this.start = true;
          this.flags = true;
          localStorage.setItem("aaa", this.flags);
        }
        this.phsr();
      });
    },
    // 点击关闭弹窗
    shut() {
      this.flag = false;
    },
    //点击兑换专区
    prefects() {
      this.$router.push({ path: "/ntegr" });
    },
  },
  computed: {
    //签到数据
    // list() {
    //   return this.$store.state.hanjinqi.list;
    // },
    //签到的天数 和 积分
    // shopdata() {
    //   let arr = {
    //     num: 0,
    //     times: [],
    //   };
    //   this.list.forEach((item, index) => {
    //     if (item.flag === "true") {
    //       arr.times.push(item);
    //       arr.num += Number(item.num);
    //     }
    //   });
    //   return arr;
    // },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 665px;
  z-index: 6;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  background: #fbfbfb;
  position: relative;
}
.box .top {
  width: 100%;
  height: 10rem;
  position: relative;
}
.top img {
  width: 100%;
  height: 100%;
}
.top .names {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 100%;
  height: 13rem;
}
.names .tops {
  width: 100%;
  height: 2rem;
  float: right;
}
.tops span {
  color: white;
}
.names .btn {
  width: 80%;
  height: 3rem;
  margin-top: 1rem;
  margin-left: 10%;
  float: left;
  margin-bottom: 1.5rem;
}
.btn img {
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  float: left;
  margin-right: 0.8rem;
}
.btn span {
  color: #fffcfd;
  font-size: 1rem;
}
.btn p {
  color: #fffcfd;
  font-size: 1rem;
}
.box .sign {
  width: 92%;
  height: 10rem;
  background: #ffffff;
  margin-left: 4%;
  border-radius: 0.466667rem;
  margin-top: -1rem;
  position: absolute;
}
.sign span {
  float: left;
  margin: 1rem 0 0 1rem;
}
.sign .listtime {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.listtime li {
  float: left;
}
.listtime li p {
  width: 2rem;
  height: 2rem;
  background: #fdf3f3;
  border-radius: 1rem;
  text-align: center;
  line-height: 2rem;
  font-size: 0.266667rem;
}
.listtime li .aaa {
  text-align: center;
  margin-top: 0.5rem;
}
.listtime li .active {
  background: red;
}
.sign .nbh {
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-around;
}
.nbh .sihh {
  text-align: center;
  width: 9rem;
  height: 1.8rem;
  background: #cccccc;
  color: #ffffff;
  line-height: 1.8rem;
  border-radius: 0.333333rem;
}
.box .integral {
  margin-top: 10.5rem;
  width: 92%;
  margin-left: 4%;
}
.integral p {
  float: right;
  margin-right: 1rem;
  color: #999999;
}
.box .foot {
  width: 92%;
  height: 19rem;
  margin: 1rem 0 0 4%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;
}
.foot li {
  width: 48%;
  height: 14rem;
  margin-bottom: 0.5rem;
}
.foot li img {
  width: 100%;
  height: 9rem;
}
.foot li .bbb {
  width: 100%;
  text-align: center;
  float: left;
  margin-top: 0.5rem;
}
.foot li p {
  width: 100%;
  float: left;
  text-align: center;
}
/* 弹窗 */
.Dialog {
  background: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.Dialog .logs {
  width: 65%;
  height: 19rem;
  position: absolute;
  top: 12rem;
  left: 17.5%;
}
.logs .hjk {
  width: 100%;
  height: 15rem;
  margin-bottom: 3rem;
  background: #ffffff;
}
.hjk b {
  width: 100%;
  text-align: center;
  float: left;
  color: #ff3f3f;
  margin-top: 1.5rem;
}
.hjk p {
  width: 100%;
  text-align: center;
  margin-top: 0.7rem;
  float: left;
}
.hjk img {
  width: 100%;
  height: 10.2rem;
  float: left;
}
.logs span {
  width: 100%;
  float: left;
  text-align: center;
  color: black;
}
</style>